﻿@page "/scheduler/recurrence-editor-rrule-generator"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo showcases the recurrence rule generation based on the options selected from the Recurrence editor and it usually follows the <a href='https://tools.ietf.org/html/rfc5545#section-3.3.10' target='_blank'>iCalendar</a> specifications. This generated recurrence rule string is a valid one to be used with the Schedule event's recurrence rule field. </p>
</SampleDescription>
<ActionDescription>
   <p>In this demo, a specific rule has been set to the recurrence editor initially within the <code>Value</code> property which will be displayed on the label placed at the top of it. Also, when the user dynamically change the
      options in recurrence editor, the modified rule value as per the selection will be displayed on it which is retrieved within the <code>OnChange</code> event.  </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper recurrence-editor-wrap">
        <div style="padding-bottom:15px;">
            <label>Rule Output</label>
            <div class="rule-output-container">
                <div id="rule-output">@RecurrenceRule</div>
            </div>
        </div>
        <div>
            <SfRecurrenceEditor @bind-Value="@RecurrenceRule"></SfRecurrenceEditor>
        </div>
    </div>
</div>
<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }

    .rule-output-container {
        height: auto;
        border: 1px solid #969696;
    }

    #rule-output {
        padding: 8px 4px;
        text-align: center;
        min-height: 20px;
        overflow: hidden;
        overflow-wrap: break-word;
    }
</style>

@code{
    string RecurrenceRule = "FREQ=DAILY;INTERVAL=2;COUNT=8;";
}